<template>  
  <div class="task-management">  
    <el-card class="task-table-card">  
      <div slot="header" class="header-section">  
        <h2>智慧化污水厂 - 任务管理</h2>  
        <!-- <el-button type="primary" icon="el-icon-plus" @click="showAddModal">新增任务</el-button>   -->
      </div>  
      <!-- 任务列表 -->  
      <el-table :data="taskData" :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}" style="width: 100%" border stripe highlight-current-row>  
        <el-table-column  type="index" label="序列"/>
        <el-table-column prop="taskId" label="任务ID" align="center"  />  
        <el-table-column prop="checkPoint" label="检查点" align="center" />  
        <el-table-column prop="checkItem" label="检查项" align="center"  />  
        <el-table-column prop="setValue" label="设定值" align="center"  /> 
        <el-table-column prop="isDelete" label="是否删除" align="center" v-if="false"/>  
        <el-table-column label="操作" align="center" width="220">  
          <template slot-scope="scope">  
            <el-button disabled type="primary" size="mini" icon="el-icon-edit" @click="showEditModal(scope.row)">编辑</el-button>  
            <el-button  
              type="danger"  
              size="mini"  
              icon="el-icon-delete"  
              @click="confirmDelete(scope.row)"  
              disabled
            >  
              删除  
            </el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
    </el-card>  

    <!-- 新增/编辑任务模态框 -->  
    <el-dialog :title="isEditing ? '编辑任务' : '新增任务'" :visible.sync="formDialogVisible" width="500px">  
      <el-form :model="form" :rules="rules" ref="taskForm" label-width="100px">  
        <el-form-item label="设备ID" prop="equipmentId">  
          <el-input v-model="form.equipmentId" type="number" placeholder="请输入设备ID" />  
        </el-form-item>  
        <el-form-item label="维护内容" prop="maintenanceContent">  
          <el-input v-model="form.maintenanceContent" type="textarea" placeholder="请输入维护内容" />  
        </el-form-item>  
        <el-form-item label="运行状态" prop="operationalStatus">  
          <el-select v-model="form.operationalStatus" placeholder="选择运行状态">  
            <el-option label="正常" value="正常"></el-option>  
            <el-option label="异常" value="异常"></el-option>  
            <el-option label="维护中" value="维护中"></el-option>  
          </el-select>  
        </el-form-item>  
        <el-form-item label="清洁度" prop="cleanliness">  
          <el-input v-model="form.cleanliness" type="number" placeholder="请输入清洁度" />  
        </el-form-item>  
        <el-form-item label="设备温度" prop="temperature">  
          <el-input v-model="form.temperature" type="number" placeholder="请输入设备温度" />  
        </el-form-item>  
      </el-form>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="formDialogVisible = false">取消</el-button>  
        <el-button type="primary" @click="saveTask">保存</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template>  

<script>  
import { Message, MessageBox } from "element-ui";  
import {list,updateTask,addTask} from "@/api/wushui/task";
import {formatDateTime} from "@/api/tool/tool";

export default {  
  name: "TaskManagement",  
  data() {  
    return {  
      taskData: [],  
      formDialogVisible: false, // 控制模态框显示  
      isEditing: false, // 是否在编辑模式  
      form: {  
        taskId: null,  
        equipmentId: "",  
        maintenanceContent: "",  
        operationalStatus: "",  
        cleanliness: "",  
        temperature: "",  
        isDelete:"",
      },  
      rules: {  
        equipment_id: [  
          { required: true, message: "设备ID不能为空", trigger: "blur" },  
        ],  
        maintenance_content: [  
          { required: true, message: "维护内容不能为空", trigger: "blur" },  
        ],  
        operational_status: [  
          { required: true, message: "运行状态不能为空", trigger: "change" },  
        ],  
      },  
    };  
  },  
  created(){
    this.getList();

  },
  methods: {  
     // 获取列表数据
     getList() {
      this.loading = true;
      list(this.formData).then(response => {
        this.taskData = response.rows;
        console.log(response)
      });
    },  
    // 显示新增任务模态框  
    showAddModal() {  
      this.isEditing = false;  
      this.resetForm();  
      this.formDialogVisible = true;  
    },  
    // 显示编辑任务模态框  
    showEditModal(row) {  
      this.isEditing = true;  
      this.form = { ...row }; // 克隆当前数据到表单  
      this.formDialogVisible = true;  
    },  
    // 重置表单  
    resetForm() {  
      this.form = {  
        task_id: null,  
        equipment_id: "",  
        maintenance_content: "",  
        operational_status: "",  
        cleanliness: "",  
        temperature: "",  
      };  
    },  
    // 保存数据（新增或编辑）  
    saveTask() {  
      this.$refs.taskForm.validate((valid) => {  
        if (valid) {  
          if (this.isEditing) {  
            // 编辑模式  
            console.log(this.form)
            updateTask(this.form).then((response) => {
              this.getList();
              Message.success("编辑成功！");
            }).catch(() => {
              this.$message.error("获取数据失败");
            });
          } else {  
            // 新增模式  
            this.form.isDelete = '0'
            addTask(this.form).then((response) => {
              this.getList();
              Message.success("新增区域成功！");  
            }).catch(() => {
              this.$message.error("获取数据失败");
            });  
          }  
          this.formDialogVisible = false;  
        }  
      });  
    },  
    // 删除任务  
    confirmDelete(row) {  
      MessageBox.confirm(  
        `确定要删除任务 "${row.maintenance_content}" 吗？`,  
        "提示",  
        {  
          confirmButtonText: "确定",  
          cancelButtonText: "取消",  
          type: "warning",  
        }  
      )  
        .then(() => {  
          row.isDelete = '1'
          updateTask(row).then((response) => {
              this.getList();
              Message.success("任务已删除！");  
            }).catch(() => {
              this.$message.error("获取数据失败");
            });
        })  
        .catch(() => {  
          Message.info("取消删除");  
        });  
    },  
  },  
};  
</script>  

<style scoped>  
.task-management {  
  padding: 20px;  
}  

.header-section {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  

.dialog-footer {  
  text-align: right;  
}  

.task-table-card {  
  margin: 20px 0;  
}  
</style>